<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-cloak</title>
</head>
<style>
  [v-cloak] {
    display: none;
  }
</style>
<body>
<!--v-cloak:cloak翻译过来是斗篷，遮盖的意思，就是说当页面标签加载完成，js还没有加载解析完成，页面会显示出为解析的如{{message}}这样的，
我们不希望出现这种情况，就用v-cloak将标签标注出来，当有这个标签的时候，css隐藏标签，js的vue加载解析完成会撤销掉v-cloak熟悉，那么这个被
css隐藏的属性就会显示出来，并且是响应后的数据结果，如：Hello Vue-->

<!--当vue解析之前，v-cloak存在-->
<!--当vue解析之后，v-cloak被撤销-->
<div id="app">
  <h2 v-cloak>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue'
      }
    });
  }, 2000)

</script>
</body>
</html>
